<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2023-11-10 15:01:12
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-07-25 17:27:04
 * @FilePath: \variant-form\src\components\form-designer\form-widget\field-widget\userModel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    title="部门选择"
    :visible.sync="open"
    width="70%"
    :before-close="close"
    :append-to-body="true"
  >
    <div class="main">
      <el-row :gutter="20">
        <!--部门数据-->
        <el-col :span="12" :xs="24" style="border-right: 1px solid #f0f0f0">
          <div class="head-container">
            <el-input
              v-model="deptName"
              placeholder="请输入部门名称"
              clearable
              size="small"
              prefix-icon="el-icon-search"
              style="margin-bottom: 20px"
            />
          </div>
          <div class="head-container" style="height: 400px; overflow: auto">
            <el-tree
              :data="deptOptions"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <!--用户数据-->
        <el-col :span="12" :xs="24">
          <div style="height: 452px; overflow: auto">
            <el-card class="box-card" shadow="never">
              <div slot="header" class="clearfix">
                <span>已选</span>
              </div>
              <!--流程处理表单模块-->
              <el-col :span="24" style="margin-bottom: 20px">
                <el-empty
                  description="暂无数据"
                  v-show="!chooseData.length"
                ></el-empty>

                <div v-if="chooseData.length">
                  <div
                    v-for="(item, index) in chooseData"
                    :key="item.id"
                    style="
                      display: flex;
                      justify-content: space-between;
                      border: 1px solid #d9d9d9;
                      align-items: center;
                      padding: 5px 20px;
                      margin-top: 15px;
                      border-radius: 6px;
                    "
                  >
                    <div>
                      <span>{{ index + 1 }}</span>
                      <span style="margin-left: 10px">{{ item.label }}</span>
                    </div>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      @click="handleDelete(item.id)"
                      style="
                        height: 26px;
                        width: 26px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                      "
                    ></el-button>
                  </div>
                </div>
              </el-col>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
      style="display: flex; justify-content: flex-end"
    >
      <div>
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="handleUserOrDept(chooseData)"
          >确 定</el-button
        >
      </div>
    </span>
  </el-dialog>
</template>

<script>
import { deptTreeSelect } from "@/api/system/user.js";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    close: {
      type: Function,
      default: () => {},
    },
    handleUserOrDept: {
      type: Function,
      default: () => {},
    },
    fieldModel: {
      type: Object,
      default: () => {},
    },
    chooseType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      deptName: undefined,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label",
      },
      chooseData: [],
    };
  },
  watch: {
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      const result = this.chooseData.find((item) => item.id === data.id);
      if (!result) {
        if (this.chooseType === "YES") {
          this.chooseData.push(data);
        } else {
          this.chooseData = [data];
        }
      }
    },
    handleDelete(id) {
      this.chooseData = this.chooseData.filter((item) => item.id !== id);
    },
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
  },
  created() {
    this.getDeptTree();
    if (this.fieldModel) {
      const departmentId = this.fieldModel?.departmentId?.split(",");
      const departmentLabel = this.fieldModel?.departmentLabel?.split(",");
      if (departmentId.length) {
        departmentId.forEach((item, index) => {
          this.chooseData.push({
            id: item,
            label: departmentLabel[index],
          });
        });
      }
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-row {
  border: none !important;
}

::v-deep .el-radio__label {
  display: none;
}

.main {
  height: 450px;
}
</style>